<template>
  <el-table-column :label="coloumnHeader.name" :prop="coloumnHeader.name" align="center" min-width="180">
    <template v-for="item in coloumnHeader.child">
      <tableColumn v-if="item.child && item.child.length" :key="item.id" :coloumn-header="item"></tableColumn>
      <el-table-column v-else :key="item.name" :label="item.name" :prop="item.prop" align="center" min-width="180">
          <!-- <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.'+item.prop" :rules="item.status ? fromaDataRules.name : {}">
                  <el-input v-model="scope.row[item.prop]" size="small" style="width: 100%" class="inputClass"></el-input>
                    </el-form-item>
          </template> -->
          <template slot-scope="scope">
            <el-form-item v-if="isInput" :prop="'tableData.' + scope.$index + '.'+item.prop" :rules="item.status === '必填' ? fromaDataRules.name : {}">
              <el-input type="textarea" :rows="1" v-model="scope.row[item.prop]" size="small" style="width: 100%;border:none" class="inputClass"></el-input>
            </el-form-item>
            <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </template>
  </el-table-column>
</template>


<script>
export default {
  name: 'tableColumn',
  props: {
    coloumnHeader: {
      type: Object,
      required: true
    },
    isInput:{
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      fromData:{
        tableData:undefined
        },
        fromaDataRules:{
	          name:[{ required: true, message: '请输入内容', trigger: 'blur' }],
	          desc:[ { required: true, message: '请填写', trigger: 'blur' }]
	        },
    }
  },
}
</script>

<style scoped>

</style>